<!--
  显示单独课堂信息组件
-->
<template>
  <el-card shadow="always">
    <div class="lesson">
      <div class="head">
        <div class="activity">
          活动
        </div>
        <div class="right">
          <div class="status">
            <el-tag
              class="mx-1"
              effect="dark"
              type="success"
              round
            >
              上课中
            </el-tag>
          </div>
          <div class="setting">
            <el-dropdown>
              <el-icon>
                <Setting/>
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="a">
                    <span style="color: #1482f0" @click="editRow(lesson.id)">编辑</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="b">
                    <el-popconfirm
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      icon-color="#626AEF"
                      title="确认删除该课堂?"
                      @confirm="confirmEvent(lesson.id)"
                    >
                      <template #reference>
                        <span style="color: #F56C6C">删除</span>
                      </template>
                    </el-popconfirm>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="msg">
          <h3>{{ lesson.title }}</h3>
          <ul>
            <li>
              <el-icon>
                <AlarmClock/>
              </el-icon>
              上课时间：{{ lesson.teachingDate }}
            </li>
            <li>
              <el-icon>
                <UserFilled/>
              </el-icon>
              教师：{{lesson.schoolTeacher.name}}
            </li>
          </ul>
        </div>
        <div class="btn">
          <el-button type="primary" @click="toLesson">进入课堂</el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang='ts' setup>
import {
  getCurrentInstance, defineProps, defineEmits,
} from 'vue';
import { useRouter } from 'vue-router';
import Request from '@/api/request/request';
import { ElMessage } from 'element-plus';

interface Props {
  lesson: any;
}

const router = useRouter();
const { proxy } = getCurrentInstance();
const props = defineProps<Props>();
const emit = defineEmits(['editRow', 'getLessonList']);

// 编辑课堂
const editRow = (id:number) => {
  emit('editRow', id);
};

// 删除指定课堂
const confirmEvent = async (id:number) => {
  const resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOL_SCHOOLTEACHINGTASKLESSON, null, {
    params: {
      ids: id,
    },
  }).delete();
  if (resData.code === 200) {
    ElMessage.success('删除成功');
    emit('getLessonList');
  }
};

// 跳转到聊天室页面
const toLesson = () => {
  router.push('/chatRoom');
};

</script>

<style lang="scss" scoped>
.lesson {
  display: flex;
  flex-direction: column;
  // 头部
  .head {
    display: flex;
    justify-content: space-between;

    .right {
      display: flex;
      align-items: center;

      // 齿轮图标的样式
      .setting {
        .el-icon {
          font-size: 20px;
          padding: 3px 0 0 10px;
          cursor: pointer;
        }
      }
    }
  }

  // 内容
  .content {
    display: flex;
    justify-content: space-between;
    height: 100px; // 设置课堂卡片高度

    // 左侧信息区域
    .msg {
      h3 {
        font-weight: 400;
        color: #666;
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          height: 100%;
          font-size: 12px;
          margin-bottom: 10px;
        }
      }
    }
    // 右边按钮
    .btn {
      margin-top: 70px;
    }
  }
}
</style>
